<template>
    <div class="sea-page-row small-page">
        <sea-request url="/sys/permit/list" class="page-left width-25 flex-box box-primary"
                     :result-parser="resultParser">
            <template #default="{response, reload, loading}">

                <div class="flex-header">
                    <h5>操作权限</h5>
                    <span>点击下方列表，即可修改配置</span>
                    <sea-tips>
                        <p>[操作权限]决定了在界面上能执行哪些操作；</p>
                        <p>授权码会在代码中直接使用，因此一般是禁止修改的。</p>
                    </sea-tips>
                    <a @click="reload" class="pull-right"><i class="fa fa-refresh"></i> 刷新</a>
                </div>

                <div class="flex-body">
                    <el-skeleton :data="response" :loading="loading">
                        <sea-editable-tree :options="response" :click="onModify" :modify="onModify"
                                           :create="onCreate" :remove="onRemove">
                        </sea-editable-tree>
                    </el-skeleton>
                </div>
            </template>
        </sea-request>


        <div class="page-body flex-box box-info">
            <div class="flex-header">
                <h5>编辑权限</h5>
                <span>点击右侧权限开始编辑</span>
            </div>

            <div class="flex-body">
                <smart-form-group ref="form_modify" method="PUT" url="/sys/permit/info"
                                  :model="form_data" :object="row_data" :on-succeed="onSucceed">
                    <smart-form-layout require name="id" label="ID" hidden>
                    </smart-form-layout>
                    <smart-form-layout require name="authorityCode" label="授权码">
                        <smart-text-view name="authorityCode" placeholder="授权码"></smart-text-view>
                    </smart-form-layout>
                    <smart-form-layout require name="type" label="权限类型">
                        <smart-text-view name="type" placeholder="权限类型"></smart-text-view>
                    </smart-form-layout>
                    <smart-form-layout require name="label" label="标签">
                        <smart-text-view name="label" placeholder="标签"></smart-text-view>
                    </smart-form-layout>
                    <smart-form-layout require name="description" label="描述">
                        <smart-text-view name="description" placeholder="描述"></smart-text-view>
                    </smart-form-layout>
                </smart-form-group>
            </div>
        </div>
        <!-- /.box -->
    </div>
</template>

<script setup>
import Bamboo from "@/lang/bamboo";
import {reactive, ref} from "vue";
import FontRequest from "@/widget/request/font-request.vue";

const row_data = ref({});

/**
 * 查询结果转换为树形结构
 */
const resultParser = (list) => {
    if (Layers.isNotEmpty(list)) {
        row_data.value = list[0];
    }
    return Bamboo.toTree(list, Bamboo.permitMapper);
}

/**
 * 新增/编辑操作成功
 *
 * @param ret 后台响应数据
 * @param data 表单数据
 */
const onSucceed = (ret, data) => {
    if (ret.code === 0) {
        Layers.succeed('操作成功！');
    }
}

/**
 * 新增节点
 * @param node 节点
 * @param data 数据
 * @returns {Promise<*>}
 */
const onCreate = (data, node) => {
    return new Promise(resolve => {
        Layers.ajax({
            url: '/sys/permit/info',
            method: 'POST',
            params: {pid: data.id}
        }).then(ret => {
            if (ret.code === 0) {
                let node = Bamboo.wrapObject(ret.data, Bamboo.defaultMapper);
                resolve(node);
            }
        })
    });
}

/**
 * 移除节点
 * @param node 节点
 * @param data 数据
 * @returns {Promise<*>}
 */
const onRemove = (data, node) => {
    return new Promise(resolve => {
        Layers.delete({
            url: '/sys/permit/info',
            method: 'DELETE',
            params: {id: data.id}
        }).then(ret => {
            if (ret.code === 0) {
                resolve();
            }
        })
    });
}

/**
 * 更新
 * @param node 节点
 * @param data 数据
 * @returns {Promise<*>}
 */
const onModify = (data, node) => {
    row_data.value = data.data;
}

const form_data = reactive([
    {
        name: 'id', label: 'ID', value: ''
        , rules: [
            {required: true, message: '[ID]字段不允许为空 ', trigger: 'blur'},
            {min: 0, max: 32, message: '最多32字符', trigger: 'blur'}
        ]
    },
    {
        name: 'path', label: '层级路径', value: ''
        , rules: [
            {required: true, message: '[层级路径]字段不允许为空 ', trigger: 'blur'},
            {min: 0, max: 32, message: '最多32字符', trigger: 'blur'}
        ]
    },
    {
        name: 'pid', label: '父级ID', value: ''
        , rules: [
            {required: true, message: '[父级ID]字段不允许为空 ', trigger: 'blur'},
            {min: 0, max: 32, message: '最多32字符', trigger: 'blur'}
        ]
    },
    {
        name: 'level', label: '层级', value: ''
    },
    {
        name: 'authorityCode', label: '授权码', value: ''
        , rules: [
            {required: true, message: '[授权码]字段不允许为空 ', trigger: 'blur'},
            {min: 0, max: 32, message: '最多32字符', trigger: 'blur'}
        ]
    },
    {
        name: 'type', label: '权限类型', value: ''
    },
    {
        name: 'label', label: '标签', value: ''
        , rules: [
            {required: true, message: '[标签]字段不允许为空 ', trigger: 'blur'},
            {min: 0, max: 255, message: '最多255字符', trigger: 'blur'}
        ]
    },
    {
        name: 'description', label: '描述', value: ''
        , rules: [
            {required: true, message: '[描述]字段不允许为空 ', trigger: 'blur'},
            {min: 0, max: 255, message: '最多255字符', trigger: 'blur'}
        ]
    },
])
</script>
